<template>
  <div class="main">
    <p  class="main_text">仓库盘存</p>

    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="SearchData">
        <div class="df fww">
          <el-form-item label="盘存编号：" style="width: 20%">
            <el-input v-model="SearchData.id" placeholder="盘存编号：" class="mr20" />
          </el-form-item>
          <el-form-item label="盘点仓库：" style="width: 20%">
            <el-select v-model="SearchData.warehouseId" placeholder="盘点仓库" class="mr20">
              <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                :value="item.warehouseId" />
            </el-select>
          </el-form-item>
          <el-form-item label="盘点类型：" style="width: 20%">
            <el-select v-model="SearchData.contentType" placeholder="盘点类型" class="mr20">
              <el-option label="原材料" value="0" />
              <el-option label="溯源件" value="1" />
              <el-option label="危固废" value="2" />
              <el-option label="非溯源件" value="3" />
              <el-option label="整仓盘存" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="盘点状态：" style="width: 20%">
            <el-select v-model="SearchData.status" placeholder="盘点状态" class="mr20">
              <el-option label="未开始" value="0" />
              <el-option label="盘点中" value="1" />
              <el-option label="有差异" value="2" />
              <el-option label="无差异" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="盘点人：" style="width: 20%">
            <el-select-v2 v-model="SearchData.checkPerson" filterable :options="options" placeholder="盘点人"
              class="mr20" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="SearchDataBtn">查询</el-button>
            <el-button type="primary" plain @click="resc">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <div class="mb20">
        <el-button type="primary" @click="InDialogVisible = true" v-if="roleList.write">添加盘点单</el-button>
        <el-button plain v-if="roleList.write">批量打印</el-button>
      </div>
      <div class="cyr-flex-box" >
      <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%"
        :header-cell-style="{ background: '#f0f6fe' }" :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column type="selection" width="50" />
        <el-table-column label="盘点编号" prop="id" show-overflow-tooltip />
        <el-table-column label="盘点仓库" prop="warehouse_name" show-overflow-tooltip>
          <template #default="props">
            <el-text @click="checkDetail(props.row)">{{ props.row.warehouse_name }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="盘点类型">
          <template #default="props">
            <!-- 0、未确认1、已确认2、有差异3、无差异 -->
            <el-tag type="success" v-if="props.row.contentType == 0">原材料</el-tag>
            <el-tag type="success" v-else-if="props.row.contentType == 1">溯源件</el-tag>
            <el-tag type="success" v-else-if="props.row.contentType == 3">非溯源件</el-tag>
            <el-tag type="danger" v-else-if="props.row.contentType == 2">危固废</el-tag>
            <el-tag type="success" v-else>整仓盘存</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="盘点人员" prop="checkPerson_name" show-overflow-tooltip />
        <el-table-column label="盘点时间" prop="checkDate" show-overflow-tooltip />
        <el-table-column label="盘点状态">
          <template #default="props">
            <!-- 0、未确认1、已确认2、有差异3、无差异 -->
            <el-text type="info" v-if="props.row.status == 0">未开始</el-text>
            <el-text type="primary" v-else-if="props.row.status == 1">盘点中</el-text>
            <el-text type="danger" v-else-if="props.row.status == 2">有差异</el-text>
            <el-text type="success" v-else>无差异</el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="props">
            <el-button size="small" link type="primary" @click="checkDetail(props.row)"
              v-if="roleList.read">查看</el-button>
            <el-button size="small" link type="danger" @click="checkListDel(props.row)" v-if="roleList.write">
              删除</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="备注" prop="remarks" show-overflow-tooltip /> -->
      </el-table>
      <!-- ********************************** 分页 ********************************** -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
      </div>
      <!-- ********************************** 添加盘点单 ********************************** -->
      <el-drawer v-model="InDialogVisible" size="50%" style="background: #f5f9ff" @close="closeDialog">
        <template #header>
          <h4 style="font-weight: 700; font-size: 18px; color: #3d3d3d">添加盘点单</h4>
        </template>
        <div class="drawer_top p20">
          <el-form v-model="searchFormData" label-position="top" class="df fww jcsb">
            <el-form-item label="盘点仓库：" style="width: 48%">
              <el-select v-model="searchFormData.warehouseId" placeholder="盘点仓库" class="mr20" filterable>
                <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                  :value="item.warehouseId" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点类型：" style="width: 48%">
              <el-select v-model="searchFormData.contentType" placeholder="盘点类型" class="mr20" @change="getShopGoods">
                <!-- 盘存类型0、原材料盘存1、溯源件盘存2、危固废盘存3、非溯源件盘存4、整库盘存 -->
                <el-option label="原材料" value="0" />
                <el-option label="溯源件" value="1" />
                <el-option label="危固废" value="2" />
                <el-option label="非溯源件" value="3" />
                <el-option label="整仓盘存" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="商品类别：" style="width: 48%" v-if="searchFormData.contentType != 4">
              <el-select v-model="searchFormData.productType" placeholder="请先选择盘点类型" class="mr20">
                <el-option v-for="item in shopGoodsList" :key="item.type_id" :label="item.type_name"
                  :value="item.type_id" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点人：" style="width: 48%">
              <el-select-v2 v-model="searchFormData.checkPerson" filterable :options="options" placeholder="请选择盘点人"
                style="width: 100%" class="mr20" />
            </el-form-item>
            <!-- <el-form-item label="备注：" style="width: 48%;">
                            <el-input v-model="searchFormData.remarks" placeholder="" class="mr20" type="textarea" />
                        </el-form-item> -->
          </el-form>
        </div>
        <!-- 盘点明细列表 -->
        <div class="drawer_top p20 mt20">
          <el-button type="primary" class="mb10" @click="generatingInventory">生成盘点明细</el-button>
          <el-tabs v-model="activeCheckName" class="demo-tabs">
            <el-tab-pane name="a">
              <template #label>
                <span>原材料</span>
              </template>
              <el-table :data="materialTableData" style="width: 100%" max-height="350" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="原材料编号" prop="rawMaterialId" show-overflow-tooltip />
                <el-table-column label="原材料名称" prop="rawMaterialName" show-overflow-tooltip />
                <el-table-column label="更新时间" prop="updatedAt" show-overflow-tooltip />
                <!-- <el-table-column label="原材料单位" prop="measuringUnit" show-overflow-tooltip /> -->
                <el-table-column label="原材料位置" prop="warehouseArea" show-overflow-tooltip />
                <el-table-column label="账面库存" prop="num" show-overflow-tooltip />
                <!-- <el-table-column label="备注" prop="rawMaterialDescription" show-overflow-tooltip /> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="b">
              <template #label>
                <span>溯源件</span>
              </template>
              <el-table :data="partsTableData" style="width: 100%" max-height="350" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="配件编号" prop="fittingId" show-overflow-tooltip />
                <el-table-column label="配件名称" prop="fittingName" show-overflow-tooltip />
                <el-table-column label="车型" prop="series" show-overflow-tooltip />
                <el-table-column label="品牌" prop="brand" show-overflow-tooltip />
                <el-table-column label="分类" prop="series" show-overflow-tooltip />
                <el-table-column label="仓库名称" prop="warehouseName" show-overflow-tooltip />
                <el-table-column label="仓库位置" prop="warehouseArea" show-overflow-tooltip />
                <!-- <el-table-column label="备注" prop="fittingDescription" show-overflow-tooltip /> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="c">
              <template #label>
                <span>非溯源件</span>
              </template>
              <el-table :data="fittingsTableData" style="width: 100%" max-height="350" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="配件编号" prop="partsId" show-overflow-tooltip />
                <el-table-column label="配件名称" prop="partsName" show-overflow-tooltip />
                <!-- <el-table-column label="单位" prop="typeId" show-overflow-tooltip />   -->
                <el-table-column label="仓库位置" prop="warehouseArea" show-overflow-tooltip />
                <el-table-column label="更新时间" prop="updatedAt" show-overflow-tooltip />
                <el-table-column label="账面库存" prop="num" show-overflow-tooltip />
                <!-- <el-table-column label="备注" prop="partsDescription" show-overflow-tooltip /> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="d">
              <template #label>
                <span>危固废</span>
              </template>
              <el-table :data="wasteTableData" style="width: 100%" max-height="350" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="危固废编号" prop="hazardousWasteId" show-overflow-tooltip />
                <el-table-column label="危固废名称" prop="hazardousWasteName" show-overflow-tooltip />
                <el-table-column label="危固废类型" prop="hazardousWasteType" show-overflow-tooltip />
                <!-- <el-table-column label="单位" prop="typeId" show-overflow-tooltip /> -->
                <el-table-column label="仓库位置" prop="warehouseArea" show-overflow-tooltip />
                <el-table-column label="更新时间" prop="updatedAt" show-overflow-tooltip />
                <el-table-column label="账面库存" prop="num" show-overflow-tooltip />
                <!-- <el-table-column label="备注" prop="remark" show-overflow-tooltip /> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>

        <template #footer>
          <div class="drawer_bottom df jcsb aic">
            <div>
              <el-button type="primary" link>
                <el-icon class="icondy">
                  <Wallet />
                </el-icon>&nbsp;打印此出库单</el-button>
            </div>
            <div>
              <el-button @click="InDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitCheck">提交</el-button>
            </div>
          </div>
        </template>
      </el-drawer>
      <!-- ********************************** 盘点单详情 ********************************** -->
      <el-drawer v-model="checkDialogVisible" size="50%" style="background: #f5f9ff" @close="closeDialog">
        <template #header>
          <h4 style="font-weight: 700; font-size: 18px; color: #3d3d3d">盘点单详情</h4>
        </template>
        <div class="drawer_top p20">
          <el-form v-model="detailFormData" label-position="top" class="df fww jcsb">
            <el-form-item label="盘点仓库：" style="width: 48%">
              <el-select v-model="detailFormData.warehouseId" placeholder="盘点仓库" class="mr20" disabled>
                <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                  :value="item.warehouseId" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点类型：" style="width: 48%">
              <el-select v-model="detailFormData.contentType" placeholder="盘点类型" class="mr20" disabled>
                <el-option label="原材料" value="0" />
                <el-option label="溯源件" value="1" />
                <el-option label="非溯源件" value="2" />
                <el-option label="危固废" value="3" />
                <el-option label="整仓盘存" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点状态：" style="width: 48%">
              <el-select v-model="detailFormData.status" placeholder="盘点状态" class="mr20" disabled>
                <el-option label="未开始" value="0" />
                <el-option label="盘点中" value="1" />
                <el-option label="有差异" value="2" />
                <el-option label="无差异" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点人：" style="width: 48%">
              <el-select-v2 v-model="detailFormData.checkPerson" filterable :options="options"
                placeholder="Please select" style="width: 100%" disabled class="mr20" />
            </el-form-item>
            <!-- <el-form-item label="备注：" style="width: 48%;">
                            <el-input v-model="detailFormData.remarks" placeholder="" class="mr20" disabled
                                type="textarea" />
                        </el-form-item> -->
          </el-form>
        </div>
        <div class="drawer_top p20 mt20">
          <el-tabs v-model="activeCheckName" class="demo-tabs">
            <el-tab-pane name="a">
              <template #label>
                <span>原材料</span>
              </template>
              <el-table :data="materialDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="原材料编号" prop="content.rawMaterialId" show-overflow-tooltip />
                <el-table-column label="原材料名称" prop="content.rawMaterialName" show-overflow-tooltip />
                <el-table-column label="原材料单位" prop="content.measuringUnit" show-overflow-tooltip />
                <el-table-column label="原材料位置" prop="content.warehouseArea" show-overflow-tooltip />
                <el-table-column label="账面库存(kg)" prop="content.num" show-overflow-tooltip />
                <!-- <el-table-column label="备注" prop="rawMaterialDescription" show-overflow-tooltip /> -->
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="实盘库存(kg)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <span>{{ props.row.checkQuantity }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="盘点差异(kg)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <el-text v-if="props.row.profitQuantity != null" size="small" type="success">↑{{
                      props.row.profitQuantity }}</el-text>
                    <el-text v-else-if="props.row.lossQuantity != null" size="small" type="danger">↓{{
                      props.row.lossQuantity }}</el-text>
                    <el-text v-else size="small" type="primary">无差异</el-text>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="b">
              <template #label>
                <span>溯源件</span>
              </template>
              <el-table :data="fittingsDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="配件编号" prop="content.fittingId" show-overflow-tooltip />
                <el-table-column label="配件名称" prop="content.fittingName" show-overflow-tooltip />
                <el-table-column label="车型" prop="content.series" show-overflow-tooltip />
                <el-table-column label="品牌" prop="content.brand" show-overflow-tooltip />
                <!-- <el-table-column label="仓库ID" prop="storeId" show-overflow-tooltip /> -->
                <el-table-column label="仓库位置" prop="content.warehouseArea" show-overflow-tooltip />
                <!-- <el-table-column label="账面库存" prop="warehouseName" show-overflow-tooltip /> -->
                <!-- <el-table-column label="备注" prop="fittingDescription" show-overflow-tooltip /> -->
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="实盘库存(个)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <span>{{ props.row.checkQuantity }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="盘点差异(个)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <el-text v-if="props.row.profitQuantity != null" size="small" type="success">↑{{
                      props.row.profitQuantity }}</el-text>
                    <el-text v-else-if="props.row.lossQuantity != null" size="small" type="danger">↓{{
                      props.row.lossQuantity }}</el-text>
                    <el-text v-else size="small" type="primary">无差异</el-text>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="c">
              <template #label>
                <span>非溯源件</span>
              </template>
              <el-table :data="partsDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="配件编号" prop="content.partsId" show-overflow-tooltip />
                <el-table-column label="配件名称" prop="content.partsName" show-overflow-tooltip />
                <!-- <el-table-column label="单位" prop="typeId" show-overflow-tooltip /> -->
                <!-- <el-table-column label="仓库ID" prop="storeId" show-overflow-tooltip /> -->
                <el-table-column label="仓库位置" prop="content.warehouseArea" show-overflow-tooltip />
                <el-table-column label="账面库存(个)" prop="content.num" show-overflow-tooltip />
                <!-- <el-table-column label="备注" prop="partsDescription" show-overflow-tooltip /> -->
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="实盘库存(个)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <span>{{ props.row.checkQuantity }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="盘点差异(个)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <el-text v-if="props.row.profitQuantity != null" size="small" type="success">↑{{
                      props.row.profitQuantity }}</el-text>
                    <el-text v-else-if="props.row.lossQuantity != null" size="small" type="danger">↓{{
                      props.row.lossQuantity }}</el-text>
                    <el-text v-else size="small" type="primary">无差异</el-text>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="d">
              <template #label>
                <span>危固废</span>
              </template>
              <el-table :data="wasteDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="危固废编号" prop="content.hazardousWasteId" show-overflow-tooltip />
                <el-table-column label="危固废名称" prop="content.hazardousWasteName" show-overflow-tooltip />
                <!-- <el-table-column label="单位" prop="typeId" show-overflow-tooltip /> -->
                <!-- <el-table-column label="仓库ID" prop="storeId" show-overflow-tooltip /> -->
                <el-table-column label="仓库位置" prop="content.warehouseArea" show-overflow-tooltip />
                <el-table-column label="账面库存(kg)" prop="content.num" show-overflow-tooltip />
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="实盘库存(kg)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <span>{{ props.row.checkQuantity }}</span>
                  </template>
                </el-table-column>
                <el-table-column v-if="detailFormData.status == 2 || detailFormData.status == 3" label="盘点差异(kg)"
                  show-overflow-tooltip>
                  <template #default="props">
                    <el-text v-if="props.row.profitQuantity != null" size="small" type="success">↑{{
                      props.row.profitQuantity }}</el-text>
                    <el-text v-else-if="props.row.lossQuantity != null" size="small" type="danger">↓{{
                      props.row.lossQuantity }}</el-text>
                    <el-text v-else size="small" type="primary">无差异</el-text>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="备注" prop="remark" show-overflow-tooltip /> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>

        <template #footer>
          <div class="drawer_bottom df jcsb aic">
            <div>
              <el-button type="primary" link>
                <el-icon class="icondy">
                  <Wallet />
                </el-icon>&nbsp;打印此出库单</el-button>
            </div>
            <div>
              <el-button @click="checkDialogVisible = false">取消</el-button>
              <el-button type="primary"
                v-show="detailFormData.status != 2 && detailFormData.status != 3 && roleList.write"
                @click="startCheck">开始盘点</el-button>
            </div>
          </div>
        </template>
      </el-drawer>
      <!-- ********************************** 开始盘点单 ********************************** -->
      <el-drawer v-model="StartcheckDialogVisible" size="50%" style="background: #f5f9ff" @close="closeDialog">
        <template #header>
          <h4 style="font-weight: 700; font-size: 18px; color: #3d3d3d">盘点单详情</h4>
        </template>
        <div class="drawer_top p20">
          <el-form v-model="detailFormData" label-position="top" class="df fww jcsb">
            <el-form-item label="盘点仓库：" style="width: 48%">
              <el-select v-model="detailFormData.warehouseId" placeholder="盘点仓库" class="mr20" disabled>
                <el-option v-for="item in WarehouseList" :key="item.warehouseId" :label="item.warehouseName"
                  :value="item.warehouseId" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点类型：" style="width: 48%">
              <el-select v-model="detailFormData.contentType" placeholder="盘点类型" class="mr20" disabled>
                <el-option label="原材料" value="0" />
                <el-option label="溯源件" value="1" />
                <el-option label="非溯源件" value="2" />
                <el-option label="危固废" value="3" />
                <el-option label="整仓盘存" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点状态：" style="width: 48%">
              <el-select v-model="detailFormData.status" placeholder="盘点状态" class="mr20" disabled>
                <el-option label="未开始" value="0" />
                <el-option label="盘点中" value="1" />
                <el-option label="有差异" value="2" />
                <el-option label="无差异" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="盘点人：" style="width: 48%">
              <el-select v-model="detailFormData.checkPerson_name" placeholder="盘点人" class="mr20" disabled>
                <el-option label="供应商1" value="1" />
                <el-option label="供应商2" value="2" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="备注：" style="width: 48%;">
                            <el-input v-model="detailFormData.remarks" type="textarea" class="mr20" disabled />
                        </el-form-item> -->
          </el-form>
        </div>
        <div class="drawer_top p20 mt20">
          <el-tabs v-model="activeCheckName" class="demo-tabs">
            <el-tab-pane name="a">
              <template #label>
                <span>原材料</span>
              </template>
              <el-table :data="materialDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="原材料编号" prop="content.rawMaterialId" show-overflow-tooltip />
                <el-table-column label="原材料名称" prop="content.rawMaterialName" show-overflow-tooltip />
                <el-table-column label="原材料单位" prop="content.measuringUnit" show-overflow-tooltip />
                <el-table-column label="原材料位置" prop="content.warehouseArea" show-overflow-tooltip />
                <el-table-column label="账面库存" prop="content.num" show-overflow-tooltip />
                <el-table-column label="实盘库存" prop="checkQuantity">
                  <template #default="props">
                    <el-input size="small" v-model="props.row.checkQuantity" />
                  </template>
                </el-table-column>
                <!-- <el-table-column label="盘点差异" prop="warehouseName" show-overflow-tooltip /> -->
                <!-- <el-table-column label="备注">
                                    <template #default="props">
                                        <el-text>{{ props.row.remarks }}</el-text>
                                    </template>
                                </el-table-column> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="b">
              <template #label>
                <span>溯源件</span>
              </template>
              <el-table :data="fittingsDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="配件编号" prop="content.fittingId" show-overflow-tooltip />
                <el-table-column label="配件名称" prop="content.fittingName" show-overflow-tooltip />
                <el-table-column label="车型" prop="content.series" show-overflow-tooltip />
                <el-table-column label="品牌" prop="content.brand" show-overflow-tooltip />
                <!-- <el-table-column label="仓库ID" prop="content.storeId" show-overflow-tooltip /> -->
                <el-table-column label="仓库位置" prop="content.warehouseArea" show-overflow-tooltip />
                <!-- <el-table-column label="账面库存" prop="warehouseName" show-overflow-tooltip /> -->
                <el-table-column label="实盘库存">
                  <template #default="props">
                    <el-select size="small" v-model="props.row.checkQuantity">
                      <el-option label="0" value="0" />
                      <el-option label="1" value="1" />
                    </el-select>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="盘点差异" prop="warehouseName" show-overflow-tooltip /> -->
                <!-- <el-table-column label="备注">
                                    <template #default="props">
                                        <el-text>{{ props.row.remarks }}</el-text>
                                    </template>
                                </el-table-column> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="c">
              <template #label>
                <span>非溯源件</span>
              </template>
              <el-table :data="partsDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="配件编号" prop="content.partsId" show-overflow-tooltip />
                <el-table-column label="配件名称" prop="content.partsName" show-overflow-tooltip />
                <!-- <el-table-column label="单位" prop="typeId" show-overflow-tooltip /> -->
                <!-- <el-table-column label="仓库ID" prop="content.storeId" show-overflow-tooltip /> -->
                <el-table-column label="仓库位置" prop="content.warehouseArea" show-overflow-tooltip />
                <el-table-column label="账面库存/个" prop="content.num" show-overflow-tooltip />
                <el-table-column label="实盘库存">
                  <template #default="props">
                    <el-input size="small" v-model="props.row.checkQuantity" />
                  </template>
                </el-table-column>
                <!-- <el-table-column label="盘点差异" prop="warehouseName" show-overflow-tooltip /> -->
                <!-- <el-table-column label="备注">
                                    <template #default="props">
                                        <el-text>{{ props.row.remarks }}</el-text>
                                    </template>
                                </el-table-column> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane name="d">
              <template #label>
                <span>危固废</span>
              </template>
              <el-table :data="wasteDetailTableData" style="width: 100%" max-height="380" size="small"
                :header-cell-style="{ background: '#f5f7fa' }" border>
                <el-table-column label="危固废编号" prop="content.hazardousWasteId" show-overflow-tooltip />
                <el-table-column label="危固废名称" prop="content.hazardousWasteName" show-overflow-tooltip />
                <!-- <el-table-column label="单位" prop="typeId" show-overflow-tooltip /> -->
                <!-- <el-table-column label="仓库ID" prop="content.storeId" show-overflow-tooltip /> -->
                <el-table-column label="仓库位置" prop="content.warehouseArea" show-overflow-tooltip />
                <el-table-column label="账面库存" prop="content.num" show-overflow-tooltip />
                <el-table-column label="实盘库存">
                  <template #default="props">
                    <el-input size="small" v-model="props.row.checkQuantity" />
                  </template>
                </el-table-column>
                <!-- <el-table-column label="备注">
                                    <template #default="props">
                                        <el-text>{{ props.row.remarks }}</el-text>
                                    </template>
                                </el-table-column> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>

        <template #footer>
          <div class="drawer_bottom df jcsb aic">
            <div>
              <el-button type="primary" link>
                <el-icon class="icondy">
                  <Wallet />
                </el-icon>&nbsp;打印此出库单</el-button>
            </div>
            <div>
              <el-button @click="StartcheckDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="pauseCheck">暂停盘点</el-button>
              <el-button type="primary" @click="endCheck">结束盘点</el-button>
            </div>
          </div>
        </template>
      </el-drawer>
      <!-- </el-tab-pane> -->
      <!-- ************************************************ 待提交 ************************************************ -->
      <!-- <el-tab-pane name="second">
                    <template #label>
                        <div>
                            <el-badge :value="1" class="item" type="primary">
                                <span>待提交</span>
                            </el-badge>
                        </div>
                    </template>

                </el-tab-pane> -->
      <!-- ************************************************ 带盘存 ************************************************ -->
      <!-- <el-tab-pane name="third">
                    <template #label>
                        <div>
                            <el-badge :value="1" class="item" type="primary">
                                <span>带盘存</span>
                            </el-badge>
                        </div>
                    </template>

                </el-tab-pane> -->
      <!-- ************************************************ 盘点中 ************************************************ -->
      <!-- <el-tab-pane name="fourth">
                    <template #label>
                        <div>
                            <el-badge :value="1" class="item" type="primary">
                                <span>盘点中</span>
                            </el-badge>
                        </div>
                    </template>

                </el-tab-pane> -->
      <!-- ************************************************ 已完成 ************************************************ -->
      <!-- <el-tab-pane name="fifth">
                    <template #label>
                        <div>
                            <el-badge :value="1" class="item" type="primary">
                                <span>已完成</span>
                            </el-badge>
                        </div>
                    </template>

                </el-tab-pane>
            </el-tabs> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { formatTime, formatTimeAll } from '@/filters/index';
import { ElMessage } from 'element-plus';
import { Wallet, Edit } from '@element-plus/icons-vue';
import {
  RequestInventoryGetlistlimit,
  RequestEmployeeGetFunctionAuthorize,
  RequestEmployeeList,
  Requestemployeelist,
  RequestInventoryPauseInventory,
  RequeststockDetailGetStockDetail,
  RequestInventoryGetInventoryProduct,
  RequestInventorySave,
  RequestWarehouseList,
  RequestInventoryGetProduct,
  RequestInventoryDeleteList,
} from '@/api/path/index.js';
const activeName = ref('first'); //主页面
const activeCheckName = ref('a'); //添加盘点明细
const InDialogVisible = ref<any>(false); //添加盘点单
const checkDialogVisible = ref<any>(false); //查看盘点单
const StartcheckDialogVisible = ref<any>(false); //开始盘点单

/*------------------------------------- 按钮权限 -------------------------------------*/
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
// import { useRouter } from 'vue-router';
// const authorizeFlag = ref<any>()
// const btnAuthority = () => {
//     // console.log(' useRouter()', useRouter().currentRoute.value.meta.title);
//     RequestEmployeeGetFunctionAuthorize(useRouter().currentRoute.value.meta.title).then((res: any) => {
//         // console.log(res.resultObj);
//         if (res.resultObj == 'W') {
//             authorizeFlag.value = false
//         } else {
//             authorizeFlag.value = true
//         }
//     })
// }
// btnAuthority()
/*------------------------------------- 按钮权限 -------------------------------------*/
/* ************************ 查询 ************************ */
const SearchData = ref<any>({
  //顶部搜索
  id: '',
  contentType: '',
  warehouseId: '',
  checkPerson: '',
  status: '',
});
const SearchDataBtn = () => {
  RequestInventoryGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    id: SearchData.value.id,
    contentType: SearchData.value.contentType,
    warehouseId: SearchData.value.warehouseId,
    checkPerson: SearchData.value.checkPerson,
    status: SearchData.value.status,
  }).then((res: any) => {
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
/* ************************ 重置 ************************ */
const resc = () => {
  (SearchData.value.id = ''),
    (SearchData.value.contentType = ''),
    (SearchData.value.warehouseId = ''),
    (SearchData.value.checkPerson = ''),
    (SearchData.value.status = ''),
    currentPage.value = 1;
    getData();
};
const tableData = ref<any>([]);
// 选择框获取数据
const handleSelectionChange = (val: any) => {
  console.log(val);
};
// 分页
const handleSizeChange = (val: number) => {
  console.log(val);
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(val);
  getData();
};
/* ********* 生成盘点明细 **********/
const materialTableData = ref<any>([]); //原材料列表数据    0
const fittingsTableData = ref<any>([]); //溯源件列表数据    1
const wasteTableData = ref<any>([]); //危固废列表数据    2
const partsTableData = ref<any>([]); //非溯源件列表数据    3
/* ******************************************* 分页获取数据 ********************************************/
const total = ref<any>(10);
const currentPage = ref(1);
const pageSize = ref(10);
const options = ref([]);
const getData = () => {
  materialTableData.value = [];
  fittingsTableData.value = [];
  wasteTableData.value = [];
  partsTableData.value = [];
  RequestInventoryGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      console.log(item);
      item.checkDate = formatTimeAll(item.checkDate);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
  RequestEmployeeList().then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.label = item.name;
      item.value = item.id;
    });
    options.value = res.resultObj.data;
  });
};
/* ********* 获取仓库列表 **********/
const WarehouseList = ref<any>([]);
const getWarehouseList = () => {
  RequestWarehouseList().then((res: any) => {
    res.resultObj.warehouseId = String(res.resultObj.warehouseId);
    WarehouseList.value = res.resultObj;
  });
};
getData();
getWarehouseList();
/* ******************************************* 添加盘点单 ********************************************/
const searchFormData = ref<any>({
  warehouseId: '',
  contentType: '',
  productType: '',
  materialType: '',
  checkPerson: '',
  remarks: '',
});
const shopGoodsList = ref<any>([]); //获取商品类别
const getShopGoods = () => {
  partsTableData.value = [];
  wasteTableData.value = [];
  fittingsTableData.value = [];
  materialTableData.value = [];
  RequestInventoryGetProduct(searchFormData.value.contentType).then((res: any) => {
    shopGoodsList.value = res.resultObj;
  });
};

/* ********* 合并为一个数组 **********/
const submitCheckData = ref<any>([]);
/* ********* 生成盘点明细 **********/
const generatingInventory = () => {
  wasteTableData.value = [];
  materialTableData.value = [];
  fittingsTableData.value = [];
  partsTableData.value = [];
  submitCheckData.value = [];
  RequestInventoryGetInventoryProduct(searchFormData.value).then((res: any) => {
    console.log('res.resultObj', res.resultObj);
    if (searchFormData.value.contentType == 0) {
      activeCheckName.value = 'a'; //原材料
      materialTableData.value = res.resultObj;
      res.resultObj.forEach((item: any) => {
        submitCheckData.value.push({
          productId: item.rawMaterialId,
          stockQuantity: item.num,
          remarks: item.rawMaterialDescription,
          contentType: 0,
        });
      });
    } else if (searchFormData.value.contentType == 1) {
      activeCheckName.value = 'b'; //选项卡
      partsTableData.value = res.resultObj;
      res.resultObj.forEach((item: any) => {
        submitCheckData.value.push({
          productId: item.fittingId,
          stockQuantity: 1,
          remarks: item.fittingDescription,
          contentType: 1,
        });
      });
    } else if (searchFormData.value.contentType == 2) {
      activeCheckName.value = 'd'; //选项卡
      wasteTableData.value = res.resultObj;
      res.resultObj.forEach((item: any) => {
        submitCheckData.value.push({
          productId: item.hazardousWasteId,
          stockQuantity: item.num,
          remarks: item.remark,
          contentType: 2,
        });
      });
    } else if (searchFormData.value.contentType == 3) {
      activeCheckName.value = 'c'; //选项卡
      fittingsTableData.value = res.resultObj;
      res.resultObj.forEach((item: any) => {
        console.log(item.fittingId);
        submitCheckData.value.push({
          productId: item.partsId,
          stockQuantity: item.num,
          remarks: item.partsDescription,
          contentType: 3,
        });
      });
    } else if (searchFormData.value.contentType == 4) {
      //整仓盘存
      wasteTableData.value = res.resultObj.waste;
      materialTableData.value = res.resultObj.material;
      partsTableData.value = res.resultObj.fittings;
      fittingsTableData.value = res.resultObj.parts;
      res.resultObj.waste.forEach((item: any) => {
        submitCheckData.value.push({
          productId: item.hazardousWasteId,
          stockQuantity: item.num,
          remarks: item.remark,
          contentType: 2,
        });
      });
      res.resultObj.material.forEach((item: any) => {
        submitCheckData.value.push({
          productId: item.rawMaterialId,
          stockQuantity: item.num,
          remarks: item.rawMaterialDescription,
          contentType: 0,
        });
      });
      res.resultObj.fittings.forEach((item: any) => {
        submitCheckData.value.push({
          productId: item.fittingId,
          stockQuantity: 1,
          remarks: item.fittingDescription,
          contentType: 1,
        });
      });
      res.resultObj.parts.forEach((item: any) => {
        submitCheckData.value.push({
          productId: item.partsId,
          stockQuantity: item.num,
          remarks: item.partsDescription,
          contentType: 3,
        });
      });
    }
  });
};
/* ********* 生成盘点明细=> 提交 **********/
const submitCheck = () => {
  console.log('submitCheckData', submitCheckData);
  const bold = new Blob([JSON.stringify(searchFormData.value)], {
    type: 'application/json;charset=UTF-8',
  });
  const bold1 = new Blob([JSON.stringify(submitCheckData.value)], {
    type: 'application/json;charset=UTF-8',
  });
  const transfer = new FormData();
  transfer.append('stockDetail', bold1);
  transfer.append('inventory', bold);
  RequestInventorySave(transfer).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg);
      searchFormData.value.warehouseId = '';
      searchFormData.value.contentType = '';
      searchFormData.value.productType = '';
      searchFormData.value.checkPerson = '';
      submitCheckData.value = [];
      InDialogVisible.value = false;
      getData();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
/* ******************************************* 删除盘点单 ********************************************/
const checkListDel = (row: any) => {
  const formimgs = new FormData();
  formimgs.append('ids', row.id);
  RequestInventoryDeleteList(formimgs).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg);
      getData();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
/* ******************************************* 查看详情 ********************************************/
const detailFormData = ref<any>({});
const materialDetailTableData = ref<any>([]); //原材料列表数据    0
const fittingsDetailTableData = ref<any>([]); //溯源件列表数据    1
const wasteDetailTableData = ref<any>([]); //危固废列表数据    2
const partsDetailTableData = ref<any>([]); //非溯源件列表数据    3
const submitCheckDetailData = ref<any>([]);
const checkDetail = (row: any) => {
  console.log(row);
  row.status = String(row.status);
  row.contentType = String(row.contentType);
  // row.warehouseId = String(row.warehouseId)
  detailFormData.value = row;
  console.log(detailFormData.value);
  if (row.status == 0) {
    checkDialogVisible.value = true;
    RequeststockDetailGetStockDetail(row.id).then((res: any) => {
      console.log(res.resultObj);
      res.resultObj.forEach((item: any) => {
        if (item.contentType == 0) {
          activeCheckName.value = 'a';
          materialDetailTableData.value.push(item);
        } else if (item.contentType == 1) {
          activeCheckName.value = 'b';
          fittingsDetailTableData.value.push(item);
        } else if (item.contentType == 2) {
          activeCheckName.value = 'd';
          wasteDetailTableData.value.push(item);
        } else if (item.contentType == 3) {
          activeCheckName.value = 'c';
          partsDetailTableData.value.push(item);
        }
      });
    });
    getData();
  } else if (row.status == 1) {
    StartcheckDialogVisible.value = true;
    RequeststockDetailGetStockDetail(row.id).then((res: any) => {
      console.log(res.resultObj);
      res.resultObj.forEach((item: any) => {
        if (item.contentType == 0) {
          activeCheckName.value = 'a';
          materialDetailTableData.value.push(item);
          materialDetailTableData.value.forEach((val: any) => {
            // val.checkQuantity = ''
            submitCheckDetailData.value.push(val);
          });
        } else if (item.contentType == 1) {
          activeCheckName.value = 'b';
          fittingsDetailTableData.value.push(item);
          fittingsDetailTableData.value.forEach((val: any) => {
            // val.checkQuantity = ''
            submitCheckDetailData.value.push(val);
          });
        } else if (item.contentType == 2) {
          activeCheckName.value = 'd';
          wasteDetailTableData.value.push(item);
          wasteDetailTableData.value.forEach((val: any) => {
            // val.checkQuantity = ''
            submitCheckDetailData.value.push(val);
          });
        } else if (item.contentType == 3) {
          activeCheckName.value = 'c';
          partsDetailTableData.value.push(item);
          partsDetailTableData.value.forEach((val: any) => {
            // val.checkQuantity = ''
            submitCheckDetailData.value.push(val);
          });
        }
      });
    });
  } else {
    checkDialogVisible.value = true;
    RequeststockDetailGetStockDetail(row.id).then((res: any) => {
      console.log(res.resultObj);
      res.resultObj.forEach((item: any) => {
        if (item.contentType == 0) {
          activeCheckName.value = 'a';
          materialDetailTableData.value.push(item);
        } else if (item.contentType == 1) {
          activeCheckName.value = 'b';
          fittingsDetailTableData.value.push(item);
        } else if (item.contentType == 2) {
          activeCheckName.value = 'd';
          wasteDetailTableData.value.push(item);
        } else if (item.contentType == 3) {
          activeCheckName.value = 'c';
          partsDetailTableData.value.push(item);
        }
      });
    });
  }
};
/* ******************************************* 开始盘点 ********************************************/
const startCheck = () => {
  getData();
  // console.log('开始盘点', detailFormData.value.id);
  checkDialogVisible.value = false;
  const bold = new Blob(
    [
      JSON.stringify({
        id: detailFormData.value.id,
        warehouseId: detailFormData.value.warehouseId,
        status: detailFormData.value.status,
      }),
    ],
    {
      type: 'application/json;charset=UTF-8',
    },
  );
  const bold1 = new Blob([JSON.stringify(submitCheckData.value)], {
    type: 'application/json;charset=UTF-8',
  });
  const transfer = new FormData();
  transfer.append('stockDetail', bold1);
  transfer.append('inventory', bold);
  RequestInventorySave(transfer).then((res: any) => {
    // console.log('asda1', res);
    getData();
  });
};
/* ******************************************* 结束盘点 ********************************************/
const endCheck = () => {
  console.log('结束盘点', detailFormData.value);
  delete detailFormData.value.checkDate;
  console.log('结束盘点Arr', submitCheckDetailData.value);
  const bold = new Blob([JSON.stringify(detailFormData.value)], {
    type: 'application/json;charset=UTF-8',
  });
  const bold1 = new Blob([JSON.stringify(submitCheckDetailData.value)], {
    type: 'application/json;charset=UTF-8',
  });
  const firmOffer = new FormData();
  firmOffer.append('stockDetail', bold1);
  firmOffer.append('inventory', bold);
  RequestInventorySave(firmOffer).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg);
      StartcheckDialogVisible.value = false;
      getData();
    } else {
      ElMessage.error(res.msg);
    }
  });
};
/* ******************************************* 暂停盘点 ********************************************/
const pauseArr = ref<any>([]);
const pauseCheck = () => {
  submitCheckDetailData.value.forEach((item: any) => {
    if (item.checkQuantity != null) {
      pauseArr.value.push(item);
      console.log('pauseArr.value', pauseArr.value);
    }
  });
  // const bold1 = new Blob(
  //     [JSON.stringify(pauseArr.value)], {
  //     type: "application/json;charset=UTF-8"
  // })
  // const firmOffer = new FormData()
  // firmOffer.append('stockDetail', bold1)
  RequestInventoryPauseInventory(pauseArr.value).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.msg);
      StartcheckDialogVisible.value = false;
      getData();
    } else {
      ElMessage.error(res.msg);
      pauseArr.value = [];
    }
  });
};
/* ******************************************* 蒙层关闭 ********************************************/
const closeDialog = () => {
  materialDetailTableData.value = [];
  fittingsDetailTableData.value = [];
  wasteDetailTableData.value = [];
  partsDetailTableData.value = [];
  submitCheckDetailData.value = [];
  getData();
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -110px;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 16px;
  margin-left: 10px;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-drawer {
    .el-form {
      .el-icon svg {
        color: #dcdfe6;
      }
    }
  }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: #fff;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

::v-deep .b0 {
  .el-input__wrapper:nth-child(1) {
    border-radius: 4px 0px 0px 4px;
    position: relative;
    left: 1px;
  }

  .el-input__wrapper:nth-child(2) {
    border-radius: 0px 4px 4px 0px;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-left: none;
  }
}

.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
